<template>
    <div class="login">
        <div class="content">
            <p>{{ title }}</p>
            <el-input placeholder="请输入用户账号！" prefix-icon="iconfont icon-zhanghao" v-model="username"></el-input>
            <el-input placeholder="请输入用户密码！" prefix-icon="iconfont icon-mima" v-model="password" show-password @keyup.native.enter="btn"></el-input>
            <el-button :type="title == '登录' && 'primary' || 'success'" @click="btn">{{ title }}</el-button>
            <div class="tips">
                <el-link :undeline="false" type="success" @click="title = '注册'">没有账号？点我注册</el-link>
                <el-link :undeline="false" type="primary" @click="title = '登录'">返回登录</el-link>
            </div>
        </div>
    </div>
</template>

<script>
    import { _isempty } from '../../utils/index'
    import { login, register } from '../../http/users'
    import { mapActions } from 'vuex'
    export default {
        data() {
            return {
                title: '登录',
                username: '',
                password: ''
            }
        },
        methods: {
            ...mapActions(['user']),

            btn() {
                if (!_isempty(this.username)) {
                    return this.$message.warning('请输入用户账号！')
                }

                if (this.username.length < 6 || this.username.length > 12) {
                    return this.$message.warning('用户账号格式不正确，长度为6-12位！')
                }

                if (!_isempty(this.password)) {
                    return this.$message.warning('请输入用户密码！')
                }

                if (this.password.length < 6 || this.password.length > 20) {
                    return this.$message.warning('用户密码格式不正确，长度为6-20位！')
                }

                let params = { username: this.username, password: this.password }

                if (this.title == "登录") {
                    login(params).then(res => {
                        if (res.status) {
                            sessionStorage.setItem('token', res.token)
                            sessionStorage.setItem('user', JSON.stringify(res.results))
                            this.user(res.results)
                            this.$router.push('/')
                        }
                    })
                } else {
                    register(params).then(res => {
                        if (res.status) {
                            this.title = "登录"
                            this.username = ''
                            this.password = ''
                        }
                    })
                }


            }
        }
    }
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: #5c7fa2;
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        width: 360px;
        padding: 0 20px 20px 20px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.7);

        p {
            text-align: center;
            color: #333;
            font-size: 20px;
        }

        .el-input {
            margin-bottom: 20px;
        }

        .el-button {
            width: 100%;
        }

        .tips {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
    }
}
</style>
